<template>
  <div
    v-show="item.list"
    class="list" :class='{active: item.end}'
    :style="{ backgroundColor: item.bgcolor }"
  >
    <div class="goods_item" v-for="goods in item.list" :key="goods.id">
      <img class="img" :src="goods.src" />
      <div class="info_box">
        <div class="name">{{goods.name}}</div>
        <div class="brief">{{goods.brief}}</div>
        <div class="price">
          ￥{{goods.nowPrice}}
          <div class="old"><s>￥{{goods.oldPrice}}</s></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "JiaList",
  props: ["item"],
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  width: 7.2rem;
  padding: 0 0.16rem;
  box-sizing: border-box;
  .goods_item {
    width: 2.21rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.06rem;
    background-color: #fff;
    margin-bottom: 0.16rem;
    .img {
      width: 2.21rem;
      height: 2.21rem;
      border-radius: 0.06rem 0.06rem 0 0;
    }
    .info_box {
      padding: 0.2rem 0.1rem;
      display: flex;
      flex-direction: column;
      .name {
        color: #3c3c3c;
        font-weight: bolder;
        font-size: 0.24rem;
        padding: 0 0.12rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .brief {
        font-size: 0.2rem;
        line-height: 1.5;
        color: #3c3c3c;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 0.06rem;
      }
      .price {
        color: rgb(245, 75, 75);
        font-size: 0.28rem;
        display: flex;
        justify-content: center;
        margin-top: 0.03rem;
        line-height: 1.2;
        font-weight: 700;
        .old {
          margin-top: 0.1rem;
          font-size: 0.21rem;
          color: rgba(0, 0, 0, 0.54);
          padding-left: 0.06rem;
        }
      }
    }
  }
  &.active {
    padding-bottom: 1.22rem;
  }
}
</style>